<template>
  <el-card class="box-card">
    <div class="header">
      <el-input
        v-model="listQuery.postName"
        placeholder="职务名称"
        size="small"
        style="width: 300px;"
        class="filter-item"
        @keyup.enter.native="submitQuery"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="submitQuery"
      >搜索</el-button>
      <el-button
        class="filter-item"
        size="small"
        icon="el-icon-delete"
        type="default"
        style="margin-left:0;"
        @click="clearQuery"
      >清空</el-button>
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="showCreateDialog"
      >新增职位表</el-button>
    </div>
    <!-- 头部end -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" min-width="80px" align="center">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职位名称" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.postName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职位编号" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.postCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职位类型" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.postType | queryPositionTypeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="310px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button
            type="success"
            icon="el-icon-view"
            size="mini"
            @click="showViewDialog(row.id)"
            plain
          >查看</el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showUpdateDialog(row.id)"
            plain
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteHandle(row.id)"
            plain
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="titleMap[dialogStatus]"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <div class="dialogBody">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px"
            :disabled="!(dialogStatus ==='update' || dialogStatus ==='create')"
          >
            <el-row>
              <el-col :xs="24" :md="24">
                <el-form-item label="职位名称" prop="postName">
                  <el-input v-model.trim="form.postName" placeholder="请输入职位名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="职位编号" prop="postCode">
                  <el-input v-model="form.postCode" placeholder="请输入职位编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <!-- <el-form-item label="职位类型" prop="post_type">
                  <el-input v-model="form.postType" placeholder="请输入职位类型字典表(post_type)"></el-input>
                </el-form-item>-->

                <el-form-item label="职位类型" prop="postType">
                  <el-select
                    v-model="form.postType"
                    placeholder="职位类型"
                    clearable
                    class="filter-item"
                    style="width: 150px"
                  >
                    <el-option
                      v-for="item in positionTypeOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="排序字段" prop="sortId">
                  <el-input v-model.number="form.sortId" placeholder="请输入排序字段"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          v-if="(dialogStatus ==='update' || dialogStatus ==='create')"
          @click="saveHandle"
        >保存</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </el-card>
</template>
<script>
import { page, findById, save, deleteById, updateById } from "@/api/position";
import { getData } from "@/api/dict";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { error } from "util";
let that;
export default {
  name: "SysPosition",
  components: { Pagination },
  directives: { waves },
  filters: {
    queryPositionTypeFilter(key) {
      let typeName = "";
      console.log(that)
      that.positionTypeOptions.forEach((e) => {
        if (e.value === key) {
          typeName = e.name;
        }
      });
      return typeName;
    },
  },
  beforeCreate:function(){
     that = this;
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      positionTypeOptions :[],
      listQuery: {
        current: 1,
        size: 10,
        postName: undefined,
      },
      rules: {
        postName: [
          { required: true, trigger: "blur", message: "职位名称不能为空" },
        ],
        postCode: [
          {
            required: true,
            trigger: "blur",
            message: "职位编号不能为空",
          },
        ],
        postType: [
          {
            required: true,
            trigger: "blur",
            message: "职位类型字典表(post_type)不能为空",
          },
        ],
        sortId: [
          {
            required: true,
            type: "number",
            message: "职位编号不能为空且必须是数字",
          },
        ],
      },
      dialogFormVisible: false,
      downloadLoading: false,
      titleMap: {
        update: "编辑",
        create: "新增",
        view: "查看",
      },
      dialogStatus: "",
      form: {},
    };
  },
  created() {
    this.getList();
    this.getDictData();
  },
  methods: {
    getDictData() {
      const th = this;
      getData('postType').then((res) => {
        th.positionTypeOptions = res.data;
      });
    },
    getList() {
      this.listLoading = true;
      page(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    submitQuery() {
      this.listQuery.current = 1;
      this.getList();
    },
    clearQuery() {
      this.listQuery.postName = undefined;
      this.submitQuery();
    },
    showCreateDialog() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.form = {};
    },
    showViewDialog(id) {
      this.resetForm();
      this.dialogStatus = "view";
      findById(id).then((response) => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    showUpdateDialog(id) {
      this.resetForm();
      this.dialogStatus = "update";
      findById(id).then((response) => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    deleteHandle(id) {
      let me = this;
      this.$confirm("是否删除这条数据？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteById(id).then(() => {
          me.getList();
        });
      });
    },
    saveHandle() {
      let me = this;
      me.$refs.form.validate((valid) => {
        if (valid) {
          this.downloadLoading = true;
          if (me.dialogStatus === "create") {
            save(this.form).then(() => {
              this.listLoading = false;
              me.dialogFormVisible = false;
              me.getList();
            });
          } else {
            updateById(this.form).then(() => {
              this.listLoading = false;
              me.dialogFormVisible = false;
              me.getList();
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields();
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  margin: 10px 8px;
  padding: 0;
}

.header {
  margin-bottom: 10px;
}

.dialogBody {
  height: 400px;
  overflow: hidden;
}

.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-vertical {
  right: 0px;
}

.el-scrollbar {
  height: 100%;
}
</style>
